<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="author" content="PIXINVENT">
    <title>999后台管理系统</title>
    <script src="app-assets/js/Dream.js"></script>
    <script src="app-assets/js/Http.js"></script>
    <link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css">
</head>
<body>
<div class="content-wrapper">
    <div class="content-header ">
        <div class="content-header-left mb-2">
            <h3 class="content-header-title mb-0">订购记录</h3>
        </div>
    </div>
    <div class="card">
        <div class="card-content">
            <div class="card-body">
                <div class="searchbox">
                    <form class="form-inline">
                        <div class="form-group">
                            <input type="text" class="form-control" id="orderId" placeholder="请填写订单编号">
                        </div>

                        <div class="form-group">
                            <button type="button" class="btn btn-primary" onclick="selects()">查询</button>
                        </div>

                    </form>
                </div>

                <div class="tablebox1">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>订单编号</th>
                            <th>供货商</th>
                            <th>金额</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="showT">

                        </tbody>
                    </table>

                    <div class="page clearfix">
                        <div class="pull-left">共 <span id="total"></span> 条记录 第 <span id="pageNum"></span> / <span
                                id="pages"></span> 页
                        </div>
                        <div class="pull-right">

                            <nav aria-label="..." class="pull-left">
                                <ul class="pagination" id="pageTo">

                                </ul>
                            </nav>
                            <div class="pull-left p-l-20"><a class="" href="#" onclick="pageTo()">跳至</a><input
                                    type="text" value="" class="form-control" id="pageNumber">页
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>

</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">订单详情</h4>
            </div>
            <div class="modal-body" >
                <div class="form1 form2">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>订单号</th>
                            <th>商品名称</th>
                            <th>供应商</th>
                            <th>数量</th>
                            <th>发货状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="PurchaseOrderDetailsVOTB">

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="deliverPurchase" onclick="deliverPurchaseOrders()">发货</button>
            </div>
        </div>
    </div>
</div>


<script src="app-assets/js/vendors.min.js" type="text/javascript"></script>
<script src="app-assets/js/app-menu.js" type="text/javascript"></script>
<script src="app-assets/js/app.js" type="text/javascript"></script>
<script src="app-assets/js/echarts.min.js" type="text/javascript"></script>

</body>
</html>
<script>
    $(document).ready(function () {
        $('#cartTab').css('display', 'none')
        selectAll($('#orderId').val(), 1)
    });

    function selectAll(orderId, pageNum) {
        $.ajax({
            'url': HTTP.getUserInfo + '/purchaseOrders',
            'type': 'get',
            'dataType': 'json',
            'data': {orderId, pageNum},
            'success': selectAllSuccess
        })
    }

    function selects() {
        selectAll($('#orderId').val(), 1)
    }

    function selectAllSuccess(data) {
        $('#showT tr').remove()
        data.data.list.forEach(dd => {
            let status = dd.status
            let color = 'red'
            if (status == 0) {
                status = "未发货"
            } else if (status == 1) {
                color = 'orange'
                status = "已发货"
            } else {
                color = 'green'
                status = "已收货"
            }
            $('#showT').append(`<tr>
                            <td>` + dd.orderId + `</td>
                            <td>` + dd.supplierName + `</td>
                            <td>￥` + dd.totalAmount + `</td>
                            <td style="color: ` + color + `">` + status + `</td>
                            <td>
                                <a href="#" data-toggle="modal"  data-target="#myModal" onclick="look(` + dd.orderId + `,` + dd.status + `)" class="btn btn-primary btn-td">查看</a>
                                <a href="#" class="btn btn-danger btn-td" onclick="deleteCart(` + dd.orderId + `)">删除</a>
                            </td>
                        </tr>`)
        })
        $('#total').html(data.data.total)
        $('#pageNum').html(data.data.pageNum)
        $('#pages').html(data.data.pages)
        $('#pageSize').html(data.data.pageSize)
        let upP = ''
        if (data.data.pageNum == 1) {
            upP = 'disabled'
        }
        let neP = ''
        if (data.data.pageNum == data.data.pages) {
            neP = 'disabled'
        }
        let pageTo = ''
        pageTo += `<li class="` + upP + `" onclick="upPage()"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>`
        for (let i = 1; i <= data.data.pages; i++) {
            if (i == data.data.pageNum) {
                pageTo += `<li class="active"><a href="#">${i} <span class="sr-only">(current)</span></a></li>`
            } else {
                pageTo += `<li><a href="#">${i}</a></li>`
            }
        }
        pageTo += `<li class="` + neP + `" onclick="nePage()"><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>`
        $('#pageTo').html(pageTo)

        $('#pageTo a').click(function () {
            let pageNum = $(this).html()
            selectAll($('#orderId').val(), pageNum)
        })
    }

    function upPage() {
        let pageNum = $('#pageNum').html()
        pageNum--
        selectAll($('#orderId').val(), pageNum)
    }

    function nePage() {
        let pageNum = $('#pageNum').html()
        pageNum++
        selectAll($('#orderId').val(), pageNum)
    }

    function pageTo() {
        let pageNum = $('#pageNumber').val()
        selectAll($('#orderId').val(), pageNum)
    }


    function deleteCart(id) {
        $.ajax({
            'url': HTTP.getUserInfo + '/purchaseOrderDetails/' + id,
            'type': 'delete',
            'dataType': 'json',
            'success': deleteCartSuccess
        })
    }

    function deleteCartSuccess(data) {
        if (data.code == 200) {
            Dreamer.success(data.message)
            selectAll($('#orderId').val(), 1)
        }
    }

    function look(orderId, status) {
        if (status == 0){
            $('#deliverPurchase').html("发货")
            $('#deliverPurchase').attr('disabled',false)
        }else {
            $('#deliverPurchase').html("已发货")
            $('#deliverPurchase').attr('disabled',true)
        }
        $.ajax({
            'url': HTTP.getUserInfo + '/purchaseOrderDetails/getAll/' + orderId,
            'type': 'get',
            'dataType': 'json',
            'success': lookSuccess
        })
    }

    function lookSuccess(data) {
        $('#PurchaseOrderDetailsVOTB tr').remove()
        data.data.forEach(dd => {
            let status = dd.updatedBy
            let color = 'red'
            let onc = `onclick="deliver(` + dd.orderId + `,'` + dd.productId + `')"`
            if (status == null) {
                status = "未补货"
            } else {
                status = "已补货"
                color = 'green'
                onc = ``
            }

            let buttonText = status === "未补货" ? "补货" : "已补货";
            let buttonDisabled = status === "已补货";
            let buttonClass = buttonDisabled ? "btn btn-secondary disabled" : "btn btn-primary";
            $('#PurchaseOrderDetailsVOTB').append(` <tr>
                            <td style="font-size: 10px" id="deliverPurchaseOrdersOrderId">` + dd.orderId + `</td>
                            <td>` + dd.productName + `</td>
                            <td>` + dd.supplierName + `</td>
                            <td>` + dd.quantity + `</td>
                            <td style="color: ` + color + `" class="deliverPurchaseOrdersOrderIdStatus">` + status + `</td>
                            <td><input type="button" class="` + buttonClass + `" value="` + buttonText + `" ` + onc + `></td>
                        </tr>`);
        })
    }

    // 补货
    function deliver(orderId, productId) {
        let updatedBy = sessionStorage.getItem('loginName')
        $.ajax({
            'url': HTTP.getUserInfo + '/purchaseOrderDetails/deliver',
            'type': 'post',
            'dataType': 'json',
            'contentType': 'application/json',
            'data': JSON.stringify({
                orderId, productId, updatedBy
            }),
            'success': deliverSuccess
        })
    }

    function deliverSuccess(data) {
        if (data.code == 200) {
            Dreamer.success("补货完成")
            look(data.data,0)
        } else {
            Dreamer.error(data.message)
        }
    }

    function deliverPurchaseOrders() {
        // 循环 class deliverPurchaseOrdersOrderIdStatus 查看是否都已经补货
        let flag = true
        $('.deliverPurchaseOrdersOrderIdStatus').each(function () {
            if ($(this).html() === "未补货") {
                Dreamer.warning("请先通知供应商补货")
                flag = false
            }
        })
        if (flag) {
            let orderId = $('#deliverPurchaseOrdersOrderId').html()
            let updatedBy = sessionStorage.getItem('loginName')
            $.ajax({
                'url': HTTP.getUserInfo + '/purchaseOrders/deliver',
                'type': 'get',
                'dataType': 'json',
                'data':{orderId,updatedBy},
                'success': deliverPurchaseOrdersSuccess
            })
        }
    }

    function deliverPurchaseOrdersSuccess(data) {
        if (data.code == 200) {
            Dreamer.success("发货成功")
            selectAll($('#orderId').val(), 1)
            $('#myModal').modal('hide')
        } else {
            Dreamer.error(data.message)
        }
    }
</script>